<template>
  <div>
    <div class="app-list-template" style="margin-left: 12px;">
      <!-- 模板1 -->
      <div class="show1 show" v-if="templatetypedata == '1' || templatetypedata == ''">
          <div class="conSizeUpload firstConP">
            <p>{{ description | intercept }}</p>
          </div>
      </div>
      <!-- 模板2 -->
      <div class="show2 show" v-else-if="templatetypedata == '2'">
        <el-row>
          <el-col :span="12">
            <div class="conSizeUpload secondConP">
              <p>{{description | intercept}}</p>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="uploadPicture2 allList">
              <div class="el-upload-dragger" @click="cropperShow(1)">
                <img v-if="imageUrl1" :src="upload_prefix + imageUrl1" class="avatar">
                <img v-else-if="imagesdata1[0]" :src="upload_prefix + imagesdata1[0].path" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon addImg"></i>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
      <!-- 模板3 -->
      <div class="show3 show" v-else-if="templatetypedata == '3'">
        <el-row>
          <div class="conSizeUpload">
              <p>{{ description | intercept }}</p>
          </div>
          <div class="uploadPicture3 allList">
              <div class="el-upload-dragger" @click="cropperShow(2)">
                <img v-if="imageUrl2" :src="upload_prefix + imageUrl2" class="avatar">
                <img v-else-if="imagesdata2[0]" :src="upload_prefix + imagesdata2[0].path" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon addImg"></i>
              </div>
          </div>
        </el-row>
      </div>
      <!-- 模板4 -->
      <div class="show4 show" v-else-if="templatetypedata == '4'">
        <el-row>
          <div class="conSizeUpload">
              <p>{{ description | intercept }}</p>
          </div>
          <div class="uploadPicture4 allList">
            <div class="el-upload-dragger" @click="cropperShow(3)">
              <img v-if="imageUrl3" :src="upload_prefix + imageUrl3" class="avatar">
              <img v-else-if="imagesdata3[0]" :src="upload_prefix + imagesdata3[0].path" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon addImg"></i>
            </div>
          </div>
          <div class="uploadPicture4 allList">
              <div class="el-upload-dragger" @click="cropperShow(4)">
                <img v-if="imageUrl4" :src="upload_prefix + imageUrl4" class="avatar">
                <img v-else-if="imagesdata3[1]" :src="upload_prefix + imagesdata3[1].path" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon addImg"></i>
              </div>
          </div>
          <div class="uploadPicture4 allList">
              <div class="el-upload-dragger" @click="cropperShow(5)">
                <img v-if="imageUrl5" :src="upload_prefix + imageUrl5" class="avatar">
                <img v-else-if="imagesdata3[2]" :src="upload_prefix + imagesdata3[2].path" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon addImg"></i>
              </div>
          </div>
        </el-row>
      </div>

      <!-- 修改 -->
      <div class="edit" v-if="releaseTerminal ==='1'">
        <i @click="dialogVisible = true" class="el-icon-edit"></i>
      </div>
      <image-cropper :width="width" :templatetypedata="templatetypedata" :height="height" :params="params" :url="upload_img" @close='close' @crop-upload-success="cropSuccess" langType="zh"
        :key="imagecropperKey" v-show="imagecropperShow"></image-cropper>
    </div>
    <el-dialog
      title="选择模板"
      :visible.sync="dialogVisible"
      width="60%">
      <el-radio-group v-model="templateType" class="fb-pop">
        <div style="width:100%; overflow:hidden; padding-left:20px;">
          <ul>
            <li style="display:block; float:left; width:25%;">
              <el-radio :label="'1'" style="display: inline-block;vertical-align: middle;"><img src="../../assets/images/model1.jpg" style="margin-top:10px;display: inline-block;vertical-align: middle;"></el-radio>
            </li>
            <li style="display:block; float:left; width:25%;">
              <el-radio :label="'2'" style="display: inline-block;vertical-align: middle;"><img src="../../assets/images/model2.jpg" style="margin-top:10px;display: inline-block;vertical-align: middle;"></el-radio>
            </li>
            <li style="display:block; float:left; width:25%;">
              <el-radio :label="'3'" style="display: inline-block;vertical-align: middle;"><img src="../../assets/images/model3.jpg" style="margin-top:10px;display: inline-block;vertical-align: middle;"></el-radio>
            </li>
            <li style="display:block; float:left; width:25%;">
              <el-radio :label="'4'" style="display: inline-block;vertical-align: middle;"><img src="../../assets/images/model4.jpg" style="margin-top:10px;display: inline-block;vertical-align: middle;"></el-radio>
            </li>
          </ul>
        </div>
      </el-radio-group>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogVisible = false">取 消</el-button>
        <el-button size="small" type="primary" @click="preservation">保 存</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import ImageCropper from "@/components/ImageCropper";
export default {
  name: "TemplateType",
  components: { ImageCropper },
  props: {
    imagesdata1: {
      // 左文右图数据
      type: Array
    },
    imagesdata2: {
      // 上文下图数据
      type: Array
    },
    imagesdata3: {
      type: Array
    },
    templatetypedata: {
      type: String
    },
    description: {
      type: String
    },
    releaseTerminal: {
      type: String
    }
  },
  data() {
    return {
      dialogVisible: false,
      templateType: "1",
      image: "",
      imageUrl1: "",
      imageUrl2: "",
      imageUrl3: "",
      imageUrl4: "",
      imageUrl5: "",
      width: 300,
      height: 200,
      params: { fileext: "png" },
      upload_img:
        process.env.BASE_API + process.env.PREFIX + "/zcm/nrbj/saveArticleFM/",
      upload_prefix: process.env.BASE_API + "/",
      imagecropperShow: false,
      imagecropperKey: 0
    };
  },
  filters: {
    intercept: function(value) {
      // js文字截取
      if (value.length > 40) {
        const newCon = value.substring(0, 40) + "...";
        return newCon;
      } else {
        return value;
      }
    }
  },
  methods: {
    preservation() {
      // 保存模板格式
      if (this.templateType === "2") {
        this.width = 300;
        this.height = 200;
      }
      if (this.templateType === "3") {
        this.width = 720;
        this.height = 400;
      }
      if (this.templateType === "4") {
        this.width = 300;
        this.height = 200;
      }
      this.dialogVisible = false; // 点击确定，关闭选择模板弹出层
      this.$emit("template-type", this.templateType);
      this.imagesInit();
    },
    cropperShow(key) {
      this.imagecropperShow = true;
      this.imagecropperKey = key;
    },
    cropSuccess(resData) {
      this.imagecropperShow = false;
      if (this.imagecropperKey === 1) {
        this.imageUrl1 = resData.data.fileurl;
        this.image = this.imageUrl1;
      }
      if (this.imagecropperKey === 2) {
        this.imageUrl2 = resData.data.fileurl;
        this.image = this.imageUrl2;
      }
      console.log(this.imagesdata3);

      // 这儿的问题
      if (this.imagecropperKey === 3) {
        this.imageUrl3 = resData.data.fileurl;
        if (this.imageUrl4 == "" && this.imagesdata3[1] !== undefined) {
            this.imageUrl4 = this.imagesdata3[1].path;
        }
        if (this.imageUrl5 == "" && this.imagesdata3[2] !== undefined) {
            this.imageUrl5 = this.imagesdata3[2].path;
        }
        this.image =
          this.imageUrl3 + "|" + this.imageUrl4 + "|" + this.imageUrl5;
      }
      if (this.imagecropperKey === 4) {
        this.imageUrl4 = resData.data.fileurl;
        if (this.imageUrl3 == "" && this.imagesdata3[0] !== undefined) {
            this.imageUrl3 = this.imagesdata3[0].path;
        }
        if (this.imageUrl5 == "" && this.imagesdata3[2] !== undefined) {
            this.imageUrl5 = this.imagesdata3[2].path;
        }
        this.image =
          this.imageUrl3 + "|" + this.imageUrl4 + "|" + this.imageUrl5;
      }
      if (this.imagecropperKey === 5) {
        this.imageUrl5 = resData.data.fileurl;
        if (this.imageUrl3 == "" && this.imagesdata3[0] !== undefined) {
            this.imageUrl3 = this.imagesdata3[0].path;
        }
        if (this.imageUrl4 == "" && this.imagesdata3[1] !== undefined) {
            this.imageUrl4 = this.imagesdata3[1].path;
        }
        this.image =
          this.imageUrl3 + "|" + this.imageUrl4 + "|" + this.imageUrl5;
      }
      console.log(this.image);
      this.$emit("images-upload-success", this.image);
      this.$message({ message: "上传成功", type: "success" });
    },
    close() {
      this.imagecropperShow = false;
    },
    imagesInit() {
      this.image = "";
      this.imageUrl1 = "";
      this.imageUrl2 = "";
      this.imageUrl3 = "";
      this.imageUrl4 = "";
      this.imageUrl5 = "";
      this.imagecropperKey = 0;
    }
  }
};
</script>

<style scoped>
.conSizeUpload p {
  font-size: 14px;
  color: #333333;
  line-height: 22px;
}
.firstConP {
  margin-top: 42px;
}
.secondConP {
  margin-top: 22px;
}
.container {
  background-color: #efefef;
  min-height: 100%;
}
.app-list-template {
  border: 1px solid #d9d9d9;
  width: 333px;
  height: 180px;
  display: inline-block;
  position: relative;
  overflow: hidden;
}
.app-list-template .show {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 10px 28px;
  overflow: hidden;
}
.app-list-template .edit {
  position: absolute;
  top: 0px;
  right: 10px;
  color: #8492a6;
  cursor: pointer;
  font-size: 1.1em;
}
.app-list-template:hover .edit {
  opacity: 1;
}
.app-list-template .edit {
  opacity: 0;
  transition: all 0.3s;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100%;
  height: 100%;
  line-height: 100%;
  text-align: center;
}
.avatar {
  width: 100%;
  display: block;
}

.uploadPicture2 {
  width: 102px;
  height: 66px;
  display: inline-block;
  margin-left: 12px;
  margin-top: 50px;
}
.uploadPicture3 {
  width: 146px;
  height: 80px;
  margin: 0 auto;
  margin-top: 8px;
}
.uploadPicture4 {
  width: 82px;
  height: 53px;
  display: inline-block;
  margin-top: 24px;
  margin-left: 5px;
}
.uploadPicture4:first-child {
  margin-left: 0;
}

.allList .avatar-uploader {
  width: 100%;
  height: 100%;
}
.allList .avatar-uploader .el-upload {
  width: 100%;
  height: 100%;
}
.allList .el-upload-dragger {
  width: 100%;
  height: 100%;
  border-radius: 0;
}
.addImg {
  position: relative;
}
.addImg::before {
  position: absolute;
  top: 50%;
  margin-top: -14px;
  left: 50%;
  margin-left: -14px;
}
</style>
